<template>
  <div class="shop">

    <div class="search">


        <el-form ref="filtrateForm" :inline="true" size="mini" :model="form" class="form">
          <el-form-item>
            <el-button-group >
      <el-button size='mini' @click="changeStatus(0)">全部</el-button>
      <el-button size='mini' @click="changeStatus(5)">未开始</el-button>
      <el-button size='mini'  @click="changeStatus(50)">进行中</el-button>
       <el-button size='mini'  @click="changeStatus(55)">已售罄</el-button>
      <el-button size='mini' @click="changeStatus(100)">已结束</el-button>
      </el-button-group>
          </el-form-item>
         <el-form-item label = "活动类型:">
          <el-select style="width:130px;" v-model="form.activityType" filterable placeholder="全部" >
             <el-option v-for="item in statusList" :key="item.id" :label="item.status" :value="item.id"></el-option>
          </el-select>
       </el-form-item>

       <el-form-item>
          <el-input  class= "input" v-model="form.title" placeholder="输入活动名称搜索" clearable ></el-input>
          <el-input  class= "input" v-model="form.shop_name" placeholder="输入小店名称搜索" clearable ></el-input>
       </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchShopActivity">搜索</el-button>
        </el-form-item>
        </el-form>

    </div>


    <el-table :data="tableData" style="width:100%"  max-height="680" :cell-style="tc" :header-cell-style="tccolor">
    <el-table-column prop="id" label="ID" ></el-table-column>
    <el-table-column  label="图片" width = "160" >
      <template slot-scope="scope">
         <div>
            <img  :key="scope.row.id" style="width:100px;"  :src="scope.row.imgUrls ? scope.row.imgUrls : errorImg" alt=""/>
         </div>
      </template>
    </el-table-column>
    <el-table-column  prop="title" label="活动名称" width='160'></el-table-column>
    <el-table-column prop="sellerName" label="所属小店" width='120'></el-table-column>
    <el-table-column  label="商品售价/活动价格" width="140">
    <template slot-scope="scope">
       ¥ {{scope.row.amount}}/ ¥ {{scope.row.actualPrice}}
    </template>
    </el-table-column>
    <el-table-column  label="剩余可用数/冻结" width='140'>
        <template slot-scope="scope">
       {{scope.row.inventory}}/{{scope.row.remainStock}}
    </template>
     </el-table-column>
      <el-table-column  width ="160" label="活动时间" >
        <template slot-scope="scope">
          {{parseTime(scope.row.startTime)}}~{{parseTime(scope.row.stopTime)}}
        </template>
      </el-table-column>
       <el-table-column label="类型" >
        <template slot-scope="scope">
          {{scope.row.activity_type == 1 ? '活动' : '团购'}}
        </template>
       </el-table-column>
    <el-table-column prop="status" label="上架状态" width='160'>
      <template slot-scope="scope">
        <!-- <el-switch v-if='scope.row.activity_type == 1 &&scope.row.status == 50'
            :key="scope.row.id"
            :active-value="50"
            :inactive-value="45"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,scope.row.activity_type)"
          ></el-switch> -->
           <!-- <el-switch v-if='scope.row.status==55'
            :key="scope.row.id"
            :active-value="50"
            :inactive-value="55"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch> -->
          <!-- <p class="status—desc">{{scope.row.missionStatus}}</p> -->
          <p v-if="scope.row.missionStatus == 1">未上架</p>
          <p  v-if="scope.row.missionStatus == 2"
            >已上架</p>
            <p  v-if="scope.row.status == 3"
            >已下架</p>
            <p  v-if="scope.row.status == 4"
            >已售罄</p>
      </template>
    </el-table-column>
    <el-table-column  label="操作" fixed="right" width="160">
      <template slot-scope="scope">
          <el-button size="mini" @click="openShopActivityDetail(scope.row.id,scope.row.activity_type,scope.row)">查看</el-button>
          <el-button size="mini" type="danger" :disabled="true" v-if="scope.row.status == 50" @click="deleteShopActivityMin(scope.row.id,scope.row.activity_type)">删除</el-button>
          <!-- <el-button size="mini" type="danger"  v-else @click="deleteShopActivityMin(scope.row.id,scope.row.activity_type)">删除</el-button> -->
      </template>
    </el-table-column>
    </el-table>

   <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>


      <jdialog
      title="商品信息"
      :visible.sync="isShowDetail"
      width="640px">
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品图片:</el-col>
        <el-col :span="21">
          <img  style="width:100px;"  :src="productDetail.imgUrls ? productDetail.imgUrls : errorImg" alt=""/>
          <div class="img_main" v-show="img_url.length">主图</div>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品名称:</el-col>
        <el-col :span="8">
          <el-input :disabled="true" placeholder v-model="productDetail.title"></el-input>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">商品原价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.amount"
            @change="changeGoodsPrice"
            :min="0"
            :disabled="true"
          ></el-input-number>
        </el-col>

        <el-col :span="3">活动售价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.actualPrice"
            :disabled="true"
            @change="changeGoodsPrice"
            :min="0"


          ></el-input-number>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">商品库存:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.inventory"
            @change="changeGoodsStock"
            :min="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
        <el-col :span="3">冻结库存:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.remainStock"
            @change="changeGoodsStock"
            :min="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">成团件数:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.numberRen"
            :min="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
        <el-col :span="4">用户购买限制:</el-col>
        <el-col :span="8">
          <el-input-number
            v-model="productDetail.limit_per_num"
            :disabled="true"
           :min="1"
            :max="10000"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">活动时间:</el-col>
        <el-col :span='8'>
    <el-date-picker
     v-model="productDetail.startTime"
      type="date"
      size='small'
       align="center"
      placeholder="开始日期">
    </el-date-picker>
      </el-col>
      <el-col :span='3'><p class="time_mid">至</p></el-col>
     <el-col :span ='8'>
        <el-date-picker
        size='small'
     v-model="productDetail.stopTime"
      type="date"
      align="center"
      placeholder="结束日期">
    </el-date-picker>
     </el-col>

      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品简介:</el-col>
        <el-col :span="12">
          <el-input  placeholder v-model="productDetail.desc" type="textarea" auotosize></el-input>
        </el-col>
      </el-row>

       <div  class="dialog-footer">
        <el-button size='mini' @click="isShowDetail = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="submitGoodsInfo">确 定</el-button>
      </div>
   </jdialog>
  </div>
</template>

<script>
import {marketingToolPageList, updateMarketingTool,marketingToolAdd,activityProductList} from "@/api/others"
// import errorImg from '@/assets/images/error_img.png'
// import uploadImg from "@/components/uploadImg"
// import {activitySearchList, activityDeleteType,activityDetail,activityDownData} from "@/api/activity"
  export default {
    components: {
    // uploadImg
  },
     data(){
       return {
         isShowDetail: false,
         form:{
          //  activity_type:'',
          //  status:0,
          //  title:'',
          //  shop_name:'',
           pageNum:1,
           pageSize:20,

         },
         productDetail:{},
         //图片列表
         img_url: [],
         errorImg:'',
         //活动类型

         //活动类型列表
         statusList:[{id:0,status:'全部'},{id:1,status:'拼团'}],
        tableData:[],
        total:0
       }
     },
     mounted () {
       this.form.status = this.$route.query.status
       if(!this.form.status){
         this.form.status = 0

       }else{
         this.form.status = Number(this.$route.query.status)
        //  this.piable = true
       }
        this.getActivityDataList()

     },
     methods:{
        tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
       changeStatus(e){
         this.form.status = e
         //重新获取小店商品管理列表
         this.form.page = 1
         this.getActivityDataList()
       },
       //根据关键词重新获取小店活动
       searchShopActivity(){
         this.form.page = 1
         this.getActivityDataList()
       },

       handleSizeChange(val){
         this.form.size = val;
         this.form.page = 1
         this.getActivityDataList()
       },
      pageChange(page){
         this.form.page = page
         this.getActivityDataList()
      },
       //查看详情
       openShopActivityDetail(id,type,row){
          this.isShowDetail  = true
          this.productDetail = row
        //  this.lookactivityDetailData(id,type)
       },
       async lookactivityDetailData(id,type){
         let res = await activityDetail('&activity_type='+type,id)
         if(res.code === 10000){
             this.productDetail = res.data
             this.img_url = res.data.product_pic_url ?  res.data.product_pic_url : []
         }else{
           this.$message.error(res.message)
         }
       },
       //删除详情
       deleteShopActivityMin(id,type){
         this.$confirm("确定删除该活动?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除员工角色
        console.log(id,type)
        this.deleteActivity(id,type)
      });
      },
      async deleteActivity(id,type){
       let res  = await activityDeleteType ({'activity_type':type},id)
       if(res.code === 10000){
          this.$message.success('删除小店活动成功')
          this.getActivityDataList()
       }else{
         this.$message.error(res.message)
       }
      },
         //更改小店活动状态
    isUseActivityChange(id,type) {
      //更新成功后重新获取商品
      console.log('id:'+id+',e:'+type)
      // this.getshoptypeopenorclose(id, e);
      this.getactivityDownData(id,type)
    },
    async getactivityDownData(id,activity_type){
      let res =  await activityDownData(id,{activity_type:activity_type})
      if(res.code === 10000){
        this.$message.success('下架活动成功')
        this.getActivityDataList()
      }else{
        this.$message.error(res.message)
      }
    },
      //获取商品图片
    getFile(file) {
      if (file.files && file.files.length && file.name == 'shopadministration_pic_list') {
        this.img_url = file.files.map(obj=>obj.url)
      }
      console.log(this.img_url)
    },
    submitGoodsInfo(){
      this.isShowDetail = false
    },
     //改变商品原价
    changeGoodsPrice() {},
     //改变商品库存
    changeGoodsStock() {},

    //获取小店活动列表数据
    async getActivityDataList (){
      // var url =
      //   "title=" +
      //   this.form.title +
      //   "&shop_name=" +
      //   this.form.shop_name +
      //   "&activity_type="+
      //   this.form.activity_type+
      //   "&status="+
      //   this.form.status+
      //   "&page=" +
      //   this.form.page +
      //   "&size="+
      //   this.form.size;
      let  res = await  activityProductList(this.form)
      if(res.code === 200){
         this.tableData = res.data.list
         this.total = res.data.total
      }else{
        this.$message.error(res.message)
      }
      console.log(res)
    }
    }
  }
</script>

<style lang="scss" scoped>
  .shop{
    padding: 20px;
    position: relative;


    .shop_title{
      font-weight: 700;
    }

    .form{
      // float: right;
      .input{
        width: 130px;
        margin-left:10px;
      }
    }
    .goodsInfo_price {
    margin-top: 20px;
    padding: 0 20px;
    }
    .status—desc{
      display: inline-block;
      margin-left: 6px;
      align-content: center;
    }
    .pagination{
      float: right;
      margin-top: 15px;
    }
    .time_mid{
      display: inline-block;
      width: 80px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      margin-top: 5px;
      margin-left: 5px;
    }
    .dialog-footer{
      text-align: center;
      margin: 15px 0;
    }
  }
</style>
